<template>
  <div class='update-gender'>
    <van-picker show-toolbar title="选择性别" :columns="columns" :default-index="changeIndex" @confirm="onConfirm"
      @cancel="onCancel" @change="onChange" />
  </div>
</template>
<script>
import { editUserProfile } from '@/api/user';
export default {
  name: 'UpdateGender',
  components: {},
  props: {
    value: {
      required: true,
    },
  },
  data() {
    return {
      columns: ['男', '女'],
      changeIndex: this.value
    };
  },
  created() {},
  computed: {},
  methods: {
    onConfirm() {
      console.log('onConfirm', this.changeIndex);
      // toast提示
      this.$toast.loading({
        message: '更新中...',
        forbidClick: true, // 禁用背景点击
        duration: 0, // 展示时长(ms)，值为 0 时，toast 不会消失
      });
      editUserProfile({
        gender: this.changeIndex,
      })
        .then((res) => {
          console.log(res);
          // 成功提示
          this.$toast('更新成功');
          // 关闭弹出层
          this.$emit('close');
          // 更新视图
          this.$emit('input', this.changeIndex);
        })
        .catch((err) => {
          this.$toast.fail(err || '更新失败');
          console.log(err);
        });
    },
    onChange(picker, value, index) {
      this.changeIndex = index
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      this.$emit('close')
    },
  },
};
</script>
<style lang='less' scoped>
</style>
